<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <%@include file="head.jsp"%>
    <title>结算页</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/pages-getOrderInfo.css" />
    <!-- 将百度地图API引入，设置好自己的key -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7Cc5Kmn672miPzG4qQhvlOrERcXMMinq"></script>
</head>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/jquery/jquery.min.js"></script>
<script>
    $(function () {
        var username = '${Username}';
        if(username === ''){
            $("#showUsername").html("请<a href=\"${pageContext.request.contextPath}/system/login\">登录</a>\n" +
                "                            <span><a href=\"${pageContext.request.contextPath}/system/register\">免费注册</a></span>")
        }else{
            $("#showUsername").html(""+username+" <a href='${pageContext.request.contextPath}/login/logout'>退出登录</a>");
        }
    });
</script>
<body>
<!--head-->
<%@include file="header.jsp"%>
<style>
    #logo{
        color: #000000;
        text-decoration: none;
    }
    #logo:link{
        color: #000000;
        text-decoration: none;
    }
    #logo:visited{
        color: #000000;
        text-decoration: none;
    }
    #logo:hover{
        color: #000000;
        text-decoration: none;
    }
</style>
<div class="cart py-container">
    <!--logoArea-->
<%--    <div class="logoArea">--%>
<%--        <a id="logo" href="${pageContext.request.contextPath}/" class="fl logo" style="margin-top: 20px"><div class="title" style="margin-top: 10px">结算页</div></a>--%>
<%--        <div class="fr search">--%>
<%--            <form action="" class="sui-form form-inline">--%>
<%--                <!--searchAutoComplete-->--%>
<%--                <div class="input-append">--%>
<%--                    <input type="text" id="autocomplete" type="text" class="input-error input-xxlarge" />--%>
<%--                    <button class="sui-btn btn-xlarge btn-danger" type="button" id="search">搜索</button>--%>
<%--                </div>--%>
<%--                <script>--%>
<%--                    $(function () {--%>
<%--                        $("#search").click(function () {--%>
<%--                            location.href = '${pageContext.request.contextPath}/goods/searchGoods?goods_name='+$("#autocomplete").val()+'&currentPage=1'--%>
<%--                        })--%>
<%--                    })--%>
<%--                </script>--%>
<%--            </form>--%>
<%--        </div>--%>
<%--    </div>--%>
    <!--主内容-->
    <div class="checkout py-container">
        <div class="checkout-tit">
            <h4 class="tit-txt">填写并核对订单信息</h4>
        </div>
        <div class="checkout-steps">
            <!--收件人信息-->
            <div class="step-tit">
                <h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd">新增/修改收货地址</a></span></h5>
            </div>
            <div class="step-cont">
                <div class="addressInfo">
                    <ul class="addr-detail">
                        <c:if test="${address == null}">
                            <li class="addr-item">
                                <div>
                                    <div class="con name selected"><a href="javascript:;" >姓名&nbsp;<span title="点击取消选择">&nbsp;</span></a></div>
                                    <div class="con address">姓名 详细地址 <span style="color: red">请点击右侧添加收货地址</span> <span> 电话</span>
                                        <span class="base">默认地址</span>
                                        <span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" ></a>&nbsp;&nbsp;<a href="javascript:;"></a></span>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </li>
                        </c:if>
                        <c:if test="${address != null}">
                            <li class="addr-item">
                                <div>
                                    <div class="con name selected"><a id="realName" href="javascript:;" >${address.realName}&nbsp;<span title="点击取消选择">&nbsp;</span></a></div>
                                    <div class="con address">${address.realName} ${address.address} <span style="color: red"></span> <span> ${address.phone}</span>
                                        <span class="base">默认地址</span>
                                        <span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" ></a>&nbsp;&nbsp;<a href="javascript:;"></a></span>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </li>
                        </c:if>
                    </ul>
                    <!--添加地址-->
                    <script>
                        $(function () {
                            $("#save").click(function () {
                                $.ajax({
                                    url:'${pageContext.request.contextPath}/goods/saveAddress',
                                    data:$("#form").serialize(),
                                    type:'GET',
                                    contentType:'application/json;charset=utf-8',
                                    dataType:'json',
                                    success:function (res) {
                                        if(res.type === 'success'){
                                            location.reload();
                                        }else{

                                        }
                                    }
                                })
                            })
                        })
                    </script>
                    <div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal modal-body  fade edit" style="width: 1px;height: 1px">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
                                    <h4 id="myModalLabel" class="modal-title">修改/添加收货地址</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="sui-form form-horizontal" id="form" autocomplete="off">
                                        <%--隐藏域提交用户名--%>
                                        <input type="hidden" value=${Username} name="username">
                                        <div class="control-group">
                                            <label class="control-label">收货人：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" name="realName" value="${address.realName}">
                                            </div>
                                        </div>

                                        <div class="control-group">
                                            <label class="control-label">联系电话：</label>
                                            <div class="controls">
                                                <input type="text" class="input-medium" name="phone" value="${address.phone}">
                                            </div>
                                        </div>

                                        <div class="control-group">
                                            <label class="control-label">详细地址：</label>
                                            <div class="controls">
                                                <input id="address" type="text" class="input-large" name="address" value="${address.address}" style="width: 360px">
                                                <button type="button" id="open">
                                                    点击显示地图获取地址
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                    <div id='allmap' style='width: 90%; height: 100%; position: absolute; display: none'></div>
                                    <script type="text/javascript">
                                        document.getElementById('open').onclick = function () {
                                            if (document.getElementById('allmap').style.display == 'none') {
                                                document.getElementById('allmap').style.display = 'block';
                                            } else {
                                                document.getElementById('allmap').style.display = 'none';
                                            }
                                        }

                                        var map = new BMap.Map("allmap");
                                        var geoc = new BMap.Geocoder();   //地址解析对象
                                        var markersArray = [];
                                        var geolocation = new BMap.Geolocation();


                                        var point = new BMap.Point(116.404412, 39.914714);
                                        map.centerAndZoom(point, 12); // 中心点
                                        geolocation.getCurrentPosition(function (r) {
                                            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                                                var mk = new BMap.Marker(r.point);
                                                map.addOverlay(mk);
                                                map.panTo(r.point);
                                                map.enableScrollWheelZoom(true);
                                            }
                                            else {
                                                alert('failed' + this.getStatus());
                                            }
                                        }, {enableHighAccuracy: true})
                                        map.addEventListener("click", showInfo);


                                        //清除标识
                                        function clearOverlays() {
                                            if (markersArray) {
                                                for (i in markersArray) {
                                                    map.removeOverlay(markersArray[i])
                                                }
                                            }
                                        }
                                        //地图上标注
                                        function addMarker(point) {
                                            var marker = new BMap.Marker(point);
                                            markersArray.push(marker);
                                            clearOverlays();
                                            map.addOverlay(marker);
                                        }
                                        //点击地图时间处理
                                        function showInfo(e) {
                                            <!--document.getElementById('lng').value = e.point.lng;-->
                                            <!--document.getElementById('lat').value =  e.point.lat;-->
                                            geoc.getLocation(e.point, function (rs) {
                                                var addComp = rs.addressComponents;
                                                var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                                                if (confirm("确定要地址是" + address + "?")) {
                                                    document.getElementById('allmap').style.display = 'none';
                                                    document.getElementById('address').value = address;
                                                }
                                            });
                                            addMarker(e.point);
                                        }
                                    </script>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" data-ok="modal" id="save" class="sui-btn btn-primary btn-large">确定</button>
                                    <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--确认地址-->
                </div>
                <div class="hr"></div>

            </div>
            <div class="hr"></div>
            <!--支付和送货-->
            <div class="payshipInfo">
                <div class="step-tit">
                    <h5>支付方式</h5>
                </div>
                <div class="step-cont">
                    <ul class="payType">
                        <li class="selected">支付宝付款<span title="点击取消选择"></span></li>
                    </ul>
                </div>
                <div class="hr"></div>
                <div class="step-tit">
                    <h5>送货清单</h5>
                </div>
                <div class="step-cont">
                    <c:forEach items="${goods}" var="item">
                        <ul class="send-detail">
                            <li>
                                <div class="sendGoods">
                                    <!-- 开始遍历 -->
                                    <ul class="yui3-g">
                                        <li class="yui3-u-1-6">
                                            <span><img src="${item.goods.image1}" style="width: 50%"/></span>
                                        </li>
                                        <li class="yui3-u-7-12">
                                            <div class="desc">${item.goods.goods_name}</div>
                                            <div class="seven">7天无理由退货</div>
                                        </li>
                                        <li class="yui3-u-1-12">
                                            <div class="price">￥${item.number * item.goods.goods_price}</div>
                                        </li>
                                        <li class="yui3-u-1-12">
                                            <div class="num">X${item.number}</div>
                                        </li>
                                        <li class="yui3-u-1-12">
                                            <div class="exit">有货</div>
                                        </li>
                                    </ul>
                                    <!-- 结束遍历 -->
                                </div>
                            </li>
                            <li></li>
                            <li></li>
                        </ul>
                    </c:forEach>
                </div>
                <div class="hr"></div>
            </div>
            <div class="linkInfo">
                <div class="step-tit">
                    <h5>发票信息</h5>
                </div>
                <div class="step-cont">
                    <span>普通发票（电子）</span>
                    <span>个人</span>
                    <span>明细</span>
                </div>
            </div>
            <div class="cardInfo">
                <div class="step-tit">
                    <h5>使用优惠/抵用</h5>
                </div>
                <div class="step-cont">
                    <span>全场满100包邮</span>
                </div>
            </div>
        </div>
    </div>
    <div class="order-summary">
        <div class="static fr">
            <div class="list">
                <span><i class="number">${totalNum}</i>件商品，总商品金额</span>
                <em class="allprice">¥${totalPrice}</em>
            </div>
            <div class="list">
                <span>返现：</span>
                <em class="money">0.00</em>
            </div>
            <div class="list">
                <span>运费：</span>
                <em class="transport">0.00</em>
            </div>
        </div>
    </div>
    <div class="clearfix trade">
        <div class="fc-price">应付金额:　<span class="price">¥${totalPrice}</span></div>
        <div class="fc-receiverInfo">寄送至:${address.address} 收货人：${address.realName} ${address.phone}</div>
    </div>
    <div class="submit">
        <a class="sui-btn btn-danger btn-xlarge" href="${pageContext.request.contextPath}/pay/toPay?orderNum=${orderNum}&totalPrice=${totalPrice}&subject=喜瑞斯订单&addressId=${address.address_id}&username=${Username}">提交订单</a>
    </div>
</div>
<!-- 底部栏位 -->
<!--页面底部-->
    <!--页面底部END-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/jquery.easing/jquery.easing.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/sui/sui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/pages/getOrderInfo.js"></script>
</body>

</html>